<script setup lang="ts"  name="video-play">
import { computed,onMounted, ref } from "vue";
import Bus from "@/utils/eventBus";
import mp401 from "@/assets/image/video.mp4";
const dialogVisible = ref(false);
const video_url = ref('');

onMounted(() => {
      Bus.$on("openVideo", (data: any) => {
        dialogVisible.value = true
        video_url.value = data.video_url || ''
        setTimeout(() => {
          let videoPlayer:any = document.querySelector('#videoPlayer')
          videoPlayer.play()
        }, 500);
        //   videoInfo.value = {
        //     videoUrl: data.rtspUrl,
        //     videoDesc: data.addr?`${data.gmt_create} ${data.addr} ${data.action}`:'',
        //   }
        // if (document.getElementById("qt_device") != null) {
        //     cpp.startPlay(JSON.stringify(data))
        // } else {
        //     appVue.$message.error('请使用app查看');
        // }
      });
      Bus.$on("closeVideo", (data: any) => {
                dialogVisible.value = false
        })
    });
</script>
<template>
 <el-dialog :close-on-click-modal="false"
    custom-class="app-video-dialog"
    v-model="dialogVisible"
    title="视频播放"
    width="850px"
  >
    <div class="app-video">
      <video
        muted
        v-if="!video_url"
        id="videoPlayer"
        width="100%"
        height="100%"
        controls
        playsinline
        webkit-playsinline=""
        poster=""
        :src="mp401"
      ></video>
      <video
        muted
        v-if="video_url"
        id="videoPlayer"
        width="100%"
        height="100%"
        controls
        playsinline
        webkit-playsinline=""
        poster=""
        :src="video_url"
      ></video>
    </div>
  </el-dialog>
</template>

<style lang="scss">
.app-video-dialog {
  .app-video {
    width: 800px;
    height: 400px;
    video {
      width: 100%;
      height: 100%;
    }
  }
}
</style>